<template>
    <view class="header">
        <view class="header-main" :style="headerStyle">
            <!-- 状态栏填充 -->
            <view class="header-status-bar" :style="{ height: statusBarHeight + 'px' }" />
            <!-- 标准的左中右结构 -->
            <view class="header-main__items" :style="{ height: height + 'px' }">
                <view class="header_other center text-ellipsis" :style="{ 'line-height': height + 'px' }">
                    <slot name="center">{{ title }}</slot>
                </view>
                <view class="header_other left" @click="goback" v-if="leftShow">
                    <slot name="left">
                        <u-icon name="arrow-left" :size="24" :color="textColor" />
                    </slot>
                </view>
                <view class="header_other right">
                    <slot name="right"></slot>
                </view>
            </view>
        </view>
        <!-- 填充头部防止塌陷 -->
        <template v-if="isShowHeaderBox">
            <view class="header-status-bar" :style="{ height: statusBarHeight + 'px' }"></view>
            <view :style="{ height: height + 'px', background: 'transparent' }"></view>
        </template>
    </view>
</template>

<script lang="ts" setup>
import { computed, type CSSProperties } from 'vue'

interface HeaderProps {
    mode?: 'light' | 'dark' // light | dark
    height?: number // 头部高度 默认为44px
    leftShow?: boolean // 是否显示左侧内容
    backgroundColor?: string // 背景色
    textColor?: string // 文字颜色
    title?: string // 标题
    isShowHeaderBox?: boolean // 是否需要生成和头部高度相同的盒子
    positionState?: 'fixed' | 'relative' | 'absolute' // 定位方式
    isShowShadow?: boolean // 是否显示阴影
}

const props = withDefaults(defineProps<HeaderProps>(), {
    mode: 'light',
    height: 44,
    leftShow: true,
    backgroundColor: '#fff',
    textColor: '#333',
    title: '',
    isShowHeaderBox: true,
    positionState: 'fixed',
    isShowShadow: true
})

const emit = defineEmits<{
    goback: []
}>()

const { statusBarHeight } = uni.getSystemInfoSync()

const headerStyle = computed(() => {
    return {
        boxShadow: props.isShowShadow ? 'rgb(16 16 16 / 24%) 0px 0px 4px 0px' : '0 0 0 0 #333',
        background: props.backgroundColor,
        color: props.textColor,
        position: props.positionState,
        width: '100%',
        zIndex: 98,
        top: 0,
        left: 0,
        padding: '0 26rpx',
        boxSizing: 'border-box'
    } as CSSProperties
})

const goback = () => {
    emit('goback')

    // 默认返回逻辑
    if (getCurrentPages().length <= 1) {
        uni.redirectTo({ url: '/pages/index/index' })
    } else {
        uni.navigateBack()
    }
}
</script>

<style lang="scss" scoped>
.header {
    .header-main {
        &__items {
            display: flex;
            align-items: stretch;
            height: 100%;
            position: relative;

            .header_other {
                height: 100%;
                position: absolute;
                top: 0;
                right: 0;
                z-index: inherit;
                display: grid;
                place-items: center;
            }

            .left {
                right: unset;
                left: 0;
            }

            .center {
                display: block;
                width: 100%;
                font-size: 32rpx;
                text-align: center;
                font-weight: 400;
                padding: 0 80rpx;
            }
        }
    }
}
</style>
